<script setup lang="ts">
import type { DefApplicationModel } from '#/api';

import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';

import { Empty, Tag } from 'ant-design-vue';

import { ExpireStateEnum } from '#/enums/system';

interface Props {
  items: DefApplicationModel.DefApplicationResultVO[];
  title: string;
  currentApplicationId?: null | string;
}

defineOptions({
  name: 'WorkbenchProject',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
  currentApplicationId: '',
});

defineEmits(['click']);
</script>

<template>
  <Card>
    <CardHeader class="py-4">
      <CardTitle class="text-lg">{{ title }}</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-0">
      <template v-if="items && items.length > 0">
        <template v-for="(item, index) in items" :key="item.name">
          <div
            :class="{
              // 第2行开始 不要上面
              'border-t-0': index > 2,
              // 第3列 不要右边
              'border-r-0': index % 3 === 2,
              // 最后一行 不要底部
              'border-b-0':
                items.length % 3 === 0 ||
                index >= Math.floor(items.length / 3) * 3,
              appDisabled: currentApplicationId === item.id,
            }"
            class="border-border group w-full cursor-pointer border-y border-r p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
            @click="$emit('click', item)"
          >
            <div class="flex items-center">
              <!-- <VbenIcon
              :color="item.color"
              :icon="item.icon"
              class="size-8 transition-all duration-300 group-hover:scale-110"
            /> -->
              <span class="ml-4 text-lg font-medium">{{ item.name }}</span>
            </div>
            <div class="text-foreground/80 mt-4 flex h-10">
              {{ item.introduce }}
            </div>
            <div class="text-foreground/80 mt-4 flex justify-between">
              <span>
                <Tag
                  :color="
                    item.state === ExpireStateEnum.EFFECTIVE
                      ? 'success'
                      : item.state === ExpireStateEnum.EXPIRED
                        ? 'error'
                        : 'processing'
                  "
                >
                  {{
                    item.state === ExpireStateEnum.EFFECTIVE
                      ? '正常使用'
                      : item.state === ExpireStateEnum.EXPIRED
                        ? '已过期'
                        : '申请开通'
                  }}
                </Tag>
              </span>
              <span v-if="item.state === ExpireStateEnum.EXPIRED">
                {{ item.expirationTime }}
              </span>
            </div>
          </div>
        </template>
      </template>
      <div v-else class="border-border w-full border-y">
        <Empty
          class="mx-auto my-5"
          description="您所在的企业暂无可用应用，联系管理员创建应用吧~"
        />
      </div>
    </CardContent>
  </Card>
</template>
<style lang="less">
.appDisabled {
  color: rgb(0 0 0 / 75%);
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 1;
}

.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
  .appDisabled {
    color: rgb(255 255 255 / 30%);
    background-color: rgb(255 255 255 / 8%);
  }
}
</style>
